<template>
	<view class="grid-columns-2 gap-10 ">
		<view class="bg-white round-12 bg p-12 gap-10 flex flex-column" v-for="(item,index) in list" :key='item.id'
			@click="emit('select',item)">
			<text class="fw-600 text-ellipsis-1 ">{{item.title}}</text>
			<text class="fs-12 text-999">{{item.create_time}}</text>
			<view class="flex flex-y-center gap-8">
				<view class="w-22 h-22 flex  flex-center bg-black round-circle" @click.stop="play(item)">
					<text class="iconfont  text-white fs-12"
						:class="playId==item.id&&playStatus==true?'icon-zanting1':'icon-bofang'"></text>
				</view>
				<view class="flex-1 flex flex-y-center gap-10">
					<image src="/static/image/yyt.png" class="h-17 w-58"></image>
					<text class="fs-15 text-blue">
						{{ $tool.formatNumber(item.duration)}}"
					</text>
				</view>
				<text class="iconfont icon-gengduo text-black" @click.stop="emit('more',item)"></text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { onMounted, onUnmounted, ref } from 'vue';
	import { $tool } from '@/utils'
	const props = defineProps({
		list: {
			type: [Array, Object],
			default: []
		}
	})
	const playId = ref(0)
	const playStatus = ref(false)
	let audioCtx = null;
	onMounted(() => {
		audioCtx = uni.createInnerAudioContext();
		audioCtx.onPlay(() => {
			playStatus.value = true
		})
		audioCtx.onPause(() => {
			playStatus.value = false
			playId.value = 0
		})
		audioCtx.onStop(() => {
			playStatus.value = false
			playId.value = 0
		})
	})

	const play = (e) => {
		playId.value = e.id
		if (e.voice_url != audioCtx.src) {
			audioCtx.src = e.voice_url
			audioCtx.play()
			return;
		}
		if (playStatus.value == false) {
			audioCtx.play()
		} else {
			audioCtx.pause()
		}

	}


	onUnmounted(() => {
		if (audioCtx) {
			try {
				audioCtx.pause();
				audioCtx.destroy()
				audioCtx = null
			} catch (e) {}
		}
	})
	const emit = defineEmits(['more', 'select'])
</script>

<style>
	.bg {
		box-shadow: 0rpx 8rpx 12rpx 0rpx rgba(8, 75, 123, 0.1);
	}

	.w-58 {
		width: 58px;
	}
</style>